<template>
	<el-drawer title="项目详情" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main>
				<el-form>
					<el-form-item label="项目名称" prop="title">{{form.title}}
					</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="项目级别" prop="proLevel">{{form.proLevelName}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="项目编号" prop="proCode">{{form.proCode}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="项目类型" prop="proSort">{{form.sortName}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="项目审批人" prop="approvalUser">{{form.approvalUserName}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="开始时间" prop="beginTime">{{form.beginTime}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="结束时间" prop="endTime">{{form.endTime}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="项目经理" prop="manager">{{form.managerUserName}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="项目预算" prop="budget">{{form.budget}}/元
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="项目备注">{{form.remark}}
					</el-form-item>
					<el-form-item label="相关附件" v-if="form.attachId!=''">
						<attach-menu :attachIds="form.attachId" :roleFlag="form.attachRole" :preview="true"></attach-menu>
					</el-form-item>
				</el-form>
				<el-divider content-position="center">任务详情</el-divider>
				<el-main>
					<el-form-item label="任务名称" prop="text">{{taskForm.text}}
					</el-form-item>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="开始时间" prop="startDate">{{taskForm.startDate}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="结束时间" prop="proCode">{{addDay(taskForm.duration, taskForm.startDate)}}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="工作量" prop="duration">{{taskForm.duration}}/天
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="当前进度" prop="progress">{{Number(taskForm.progress)*100}}%
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="当前状态" prop="status">
								<el-tag type="danger" v-if="taskForm.status=='0'">进行中</el-tag>
								<el-tag type="danger" v-else-if="taskForm.status=='1'">已挂起</el-tag>
								<el-tag type="success" v-else-if="taskForm.status=='2'">完成</el-tag>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="任务负责人" prop="userName">{{taskForm.userName}}
							</el-form-item>
						</el-col>
					</el-row>
				</el-main>
				<el-divider content-position="center">任务处理过程</el-divider>
				<el-main class="nopadding">
					<scTable ref="table" :apiObj="apiObj" :params="{taskId:this.taskId}" row-key="recordId" stripe remoteSort remoteFilter>
						<el-table-column label="#" type="index" width="50"></el-table-column>
						<el-table-column label="处理事件标题" prop="title" width="200" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="完成时间" prop="finishTime" width="150"></el-table-column>
						<el-table-column label="处理人" prop="userName" width="100"></el-table-column>
						<el-table-column label="完成进度" prop="progress" width="100">
							<template #default="scope">
								{{Number(scope.row.progress)*100}}%
							</template>
						</el-table-column>
						<el-table-column label="相关附件" prop="attachId" width="200" :show-overflow-tooltip="true">
							<template #default="scope">
								<attach-menu :attachIds="scope.row.attachId" :roleFlag="3" :preview="true"></attach-menu>
							</template>
						</el-table-column>
						<el-table-column label="处理结果" prop="remark" width="200" :show-overflow-tooltip="true">
						</el-table-column>
					</scTable>
				</el-main>
				<el-footer style="text-align: center;">
					<el-button @click="visible=false">关闭</el-button>
				</el-footer>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu
	},
	data() {
		return {
			loading: false,
			form: {
			},
			taskId:'',
			apiObj:this.$API.project.proTaskProcess.getProTaskProcessList,
			taskForm:{
				text:'',
				startDate:"",
				duration:0,
				progress:null,
				status:"",
				userName:"",
			},
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {

	},
	methods: {
		addDay(dayNumber, dateStr) {
			var date = new Date(dateStr);
			date = date ? date : new Date();
			var ms = dayNumber * (1000 * 60 * 60 * 24)
			var newDate = new Date(date.getTime() + ms);
			return this.formatDate(newDate);
		},
		formatDate(myDate) {
			var year = myDate.getFullYear();
			var month = myDate.getMonth() + 1;
			var date = myDate.getDate();
			var now = year + '-' + this.getNow(month) + "-" + this.getNow(date);
			return now;
		},
		getNow(s) {
			return s < 10 ? '0' + s : s;
		},
		async getProTaskById()
		{
			let res = await this.$API.project.proTask.getProTaskById.get({taskId:this.taskId});
			if (res.code == 200) {
				this.taskForm = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//显示
		open(model){
			this.model=model;
			this.visible = true;
			return this;
		},
		//表单注入数据
		setData(data){
			this.taskId = data.taskId;
			this.getProRecordById(data.proId);
			this.getProTaskById();
		},
		async getProRecordById(proId){
			let res = await this.$API.project.proRecord.getProRecordById.get({proId:proId});
			if (res.code == 200) {
				this.form = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>

<style>
</style>
